<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <title>Hello</title>
    <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
    <!--        http://           localhost             :           8080                             /SSM                   / -->

    <%-- 使用base标签注意事项：
        1.base 标签必须写在 head 标签内部
        2.base 标签必须在所有“带具体路径”的标签的前面
        3.serverName 部分 EL 表达式和 serverPort 部分 EL 表达式之间必须写“:”
        4.serverPort 部分 EL 表达式和 contextPath 部分 EL 表达式之间绝对不能写“/”
          原因：contextPath 部分 EL 表达式本身就是“/”开头,如果多写一个“/”会干扰 Cookie 的工作机制
         contextPath 部分 EL 表达式后面必须写“/”
        5.页面上所有参照base标签的标签必须都写在base标签的后面
    --%>

    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script href="text/javascript">
        $(function(){
            $("#btn1").click(function(){
                $.ajax({
                    "url": "send/arrayone.html",  //请求目标资源地址
                    "type": "post",            //请求方式
                    "data": {                  //请求时候发送的数据
                        "array": [5,8,10]
                    },
                    "dataType": "text",        //如何对待服务器端返回的数据（以何种方式对服务器端的数据进行解析）
                    "success": function (response) { //服务器端成功处理请求后调用的回调函数
                         alert(response);
                    },
                    "error": function (response) {   //服务器端处理请求失败后调用的回调函数
                         alert(response);
                    }
                });
            });
        });

        $(function(){
            $("#btn2").click(function(){
                $.ajax({
                    "url": "send/arraytwo.html",  //请求目标资源地址
                    "type": "post",            //请求方式
                    "data": {                  //请求时候发送的数据
                        "array[0]" : 5,
                        "array[1]" : 8,
                        "array[2]" : 10
                    },
                    "dataType": "text",        //如何对待服务器端返回的数据（以何种方式对服务器端的数据进行解析）
                    "success": function (response) { //服务器端成功处理请求后调用的回调函数
                        alert(response);
                    },
                    "error": function (response) {   //服务器端处理请求失败后调用的回调函数
                        alert(response);
                    }
                });
            });
        });

        $(function(){
            $("#btn3").click(function(){

                //准备好要发送到服务器端的数组
                var array = [5,8,10];
                //将json数组转换为json字符串
                var requestBody = JSON.stringify(array);

                $.ajax({
                    "url": "send/arraythree.html",  //请求目标资源地址
                    "type": "post",            //请求方式
                    "data": requestBody,                 //请求时候发送的数据
                    "contentType" : "application/json;charset=UTF-8", //告诉服务器端本次请求的请求体是json数据
                    "dataType": "text",        //如何对待服务器端返回的数据（以何种方式对服务器端的数据进行解析）
                    "success": function (response) { //服务器端成功处理请求后调用的回调函数
                        alert(response);
                    },
                    "error": function (response) {   //服务器端处理请求失败后调用的回调函数
                        alert(response);
                    }
                });
            });
        });

        $(function(){
            $("#btn4").click(function(){

                //准备好要发送到服务器端的数组
                var student = {
                    "stuId" : 5,
                    "stuName" : "张三",
                    "address" : {
                        "province" : "广东",
                        "city" : "深圳",
                        "street" : "后端"
                    },
                    "list" : [
                        {
                            "subjectName" : "JAVASE",
                            "subjectScore" :100
                        },
                        {
                            "subjectName" : "JAVAEE",
                            "subjectScore" :99
                        }
                    ],
                    "map" : {
                        "k1" : "v1",
                        "k2" : "v2"
                    }
                };
                //将json数组转换为json字符串
                var requestBody = JSON.stringify(student);

                $.ajax({
                    "url": "send/compose/object.json",  //请求目标资源地址
                    "type": "post",            //请求方式
                    "data": requestBody,                 //请求时候发送的数据
                    "contentType" : "application/json;charset=UTF-8", //告诉服务器端本次请求的请求体是json数据
                    "dataType": "json",        //如何对待服务器端返回的数据（以何种方式对服务器端的数据进行解析）
                    "success": function (response) { //服务器端成功处理请求后调用的回调函数
                        console.log(response);
                    },
                    "error": function (response) {   //服务器端处理请求失败后调用的回调函数
                        console.log(response);
                    }
                });
            });
        });

        $(function(){
            $("#btn5").click(function () {
                layer.msg("layer的弹框");
            });
        });



    </script>
</head>
<body>
        <a href="test/ssm.html">测试SSM</a>
        <br/>
        <br/>
        <br/>
        <button id="btn1">发送一个数组[5,8,10]</button>
        <br/>
        <br/>
        <br/>
        <button id="btn2">发送一个数组[5,8,10]</button>
        <br/>
        <br/>
        <br/>
        <button id="btn3">发送一个数组[5,8,10]</button>
        <br/>
        <br/>
        <br/>
        <button id="btn4">发送一个Student对象</button>
        <br/>
        <br/>
        <br/>
        <button id="btn5">点我弹框</button>
</body>
</html>
